{% extends "base.html" %}

{% block title %}
Controle de Gastos
{% endblock title %}

{% block extrahead %}
        $(function() {
		$('#botao_fluxo').addClass('active');
                $( "#id_data" ).datepicker({
			changeMonth: true,
			changeYear: true,
                        dateFormat: 'dd/mm/yy',
                        yearRange: '2009:{{ano_now.year}}'
		});
        });
{% endblock extrahead %}

{% block content %}
        
{% load ano_gasto %}

<div class="box-body">

        <div class="box-header clear">

                <ul class="tabs clear">
                        {% for ano in lista_anos %}
                        <li><a href="#ano{{forloop.counter}}">{{ano}}</a></li>
                        {% endfor %}

                </ul>

                

                <h2>Tabela de Gastos</h2>

        </div>

        

        <div class="box-wrap clear">

                
                 {% for lista in lista_gastos %}
                <!-- DATA-TABLE JS PLUGIN -->
        
                <div id="ano{{forloop.counter}}">



                        <table class="style1 datatable">
                                
                        <thead>
                                <tr>
                                    <th>Descrição:</th>
                                    
                                    <th>Valor:</th>
                                    
                                    <th>Data:</th>
                                    
                                    <th>Ações:</th>
                                </tr>
                        </thead>

                        <tbody>
                                {% for gastos in lista %}
                                    <tr>
                                            <td>{{gastos.descricao}}</td>
                                            <td>{{gastos.valor}}</td>
                                            <td>{{gastos.data}}</td>
                                            <td><a href=/delete_gastos/{{gastos.id}}><input type="button" class="button red size-80 fl" value="Deletar" /></a></td>
                                    </tr>
                                {% endfor %}
                        </tbody>

                        </table>



                </div><!-- /#table -->

                {% endfor %}
                <form action="" method="post">
                        <h2> Adicionar novo Gasto </h2>
                        <table>
                        {{gastos.as_table}}
                        </table>
                        <input type="submit" class="button green size-120 fl" value="Salvar Dados" />
                </form>
        </div><!-- end of box-wrap -->

</div> <!-- end of box-body -->

</div> <!-- end of content-box -->

{% endblock content %}